<template>
  <div id="container" ref="container" class="map-container" >
  </div>	
</template>
<style scoped>
.map-container {
  width: 100%;
  height: 100vh;  /* 或者设置为你需要的高度 */
}

</style>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=633c89319719fe6fb46d382d0c9a4187"></script>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  name: 'AMapComponent',
  data() {
    return {
      map: null,
      massMarks: null,
	  geolocation: null,
	  address:null,
	  clickPoiLnglat:null,//点击标注的坐标
	  clickPoiName:null,//点击标注的名字
	  userLnglat:null,//用户坐标
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
	//地图初始化
    initMap() {
	  window._AMapSecurityConfig = {
	    securityJsCode: "438401e9cc1695190c5dd8406cb4c318",//高德地图API密钥
	  };
      AMapLoader.load({
        key: '633c89319719fe6fb46d382d0c9a4187',  // 替换为你的高德地图APIkey
        version: '2.0',
		plugins: ["AMap.ToolBar", "AMap.Scale","AMap.HawkEye", "AMap.Driving", "AMap.Navigation"],//插件包配置
      }).then((AMap) => {
        this.map = new AMap.Map("container", {
          center: [118.139364, 24.492068],  // 设置地图中心点
          zoom: 11,  // 设置地图初始缩放级别
		  resizeEnable: true,
        });
		
		
		// 初始化插件
		this.initPlugins();
        // 初始化海量点标注MassMarks（巡检设备点）
        this.initMassMarks();
		
		// 定位当前位置
		AMap.plugin('AMap.Geolocation', () => {
			const geolocation = new AMap.Geolocation({
			  enableHighAccuracy: true, // 是否使用高精度定位，默认:true
			  timeout: 10000,           // 超过10秒后停止定位，默认：5s
			  buttonPosition: 'RB',     // 定位按钮的停靠位置
			  buttonOffset: new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
			  zoomToAccuracy: false      // 定位成功后是否自动调整地图视野到相应级别
			});

			this.map.addControl(geolocation);
			geolocation.getCurrentPosition((status, result) => {
			  if (status === 'complete') {
				// 定位成功，输出定位信息
				console.log("当前坐标：",result.position.getLng(), result.position.getLat());
				this.userLnglat = result.position;
				this.getAddressByCoordinate(result.position);
				// 可以获取到经纬度等信息，例如：result.position.getLng(), result.position.getLat()
				
			  } else {
				// 定位失败，输出错误信息
				console.log('定位失败', result);
				
				this.$modal.msgError('定位失败',result.message)
			  }
			});
		});
      }).catch(e => {
        console.error(e);
      });
    },
	//初始化插件
	initPlugins() {
		var toolbar = new AMap.ToolBar(); //工具条
		this.map.addControl(toolbar);
		var scale = new AMap.Scale();//比例尺
		this.map.addControl(scale);		
		var hawkeye = new AMap.HawkEye();//鹰眼图
		this.map.addControl(hawkeye);
		
	},
	// 初始化海量点标注MassMarks（巡检设备点）
    initMassMarks() {
      // 配置MassMarks样式
      const style = [
        {
          url: '../static/images/map-source/house.png',  // 替换为你的标记图标路径
          size: new AMap.Size(25, 35),
          anchor: new AMap.Pixel(12, 35),
          offset: new AMap.Pixel(0, 0),
        },
      ];

      // 创建MassMarks实例
      this.massMarks = new AMap.MassMarks(null, {
        zIndex: 110,
        style: style,
        gridSize: 50,
      });

      const locations = [
        { lnglat: [118.139364, 24.502168], id:"1111", title:"集美AAA配电站", addr:"集美区AAA路123号"},
        { lnglat: [118.119364, 24.492068], id:"2222", title:"集美BBB配电站", addr:"集美区BBB路123号"},
		{ lnglat: [118.129364, 24.482068], id:"3333", title:"集美CCC配电站", addr:"集美区CCC路123号"},
		{ lnglat: [118.139364, 24.472068], id:"4444", title:"集美DDD配电站", addr:"集美区DDD路123号"},
        // 标注坐标点集
      ];

      // 将数据设置到MassMarks中
      this.massMarks.setData(locations);

      // 将MassMarks添加到地图上
      this.massMarks.setMap(this.map);
	  this.massMarks.on('click', this.markerClick);
    },
	//标注点点击事件
	markerClick(e) {
		//console.log(e.data.lnglat);
		//这个只是标注的点击事件
		//this.infoWindow.setContent(e.date.title);
		this.infoWindow = new AMap.InfoWindow({ // 创建 InfoWindow 实例
			// 使用 HTML 设置内容
			content: "<div>"+
						"<table>"+
							"<tr>"+
								"<td>"+
									"<font size='3' font-weight: bold>"+e.data.title+"</font>"+
								"</td>"+
							"</tr>"+
							"<tr>"+
								"<td>"+
									"<font size='1'>"+e.data.addr+"</font>"+
								"</td>"+
							"</tr>"+
							"<tr>"+
								"<td style='text-align:center'>"+
									"<input id='"+e.data.id+"' size=10 type='button' class='custom-button' style='background-color: #5555ff;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 12px;margin: 4px 2px;cursor: pointer;border: none;border-radius: 12px;transition: background-color 0.3s;' value='开始巡检'>"+
								"</td>"+
							"</tr>"+
						"</table>"+
					"</div>",
			offset: new AMap.Pixel(0, 0), // 设置信息窗体偏移量
			anchor: "top-center",
		});
		this.infoWindow.open(this.map, e.data.lnglat);
		this.map.setCenter(e.data.lnglat);
		this.clickPoiLnglat = e.data.lnglat;
		this.clickPoiName = e.data.title;
		//绑定Infowindow的点击事件,给个定时器，确定infowindwo有了之后进行绑定
		setTimeout(_=>{
		  this.bindwindowclick()
		}, 500)

	},
	//通过经纬度获取地址文本信息
	getAddressByCoordinate(lnglat) {
	  // 使用高德地图的逆地理编码API获取地址信息
	  AMap.plugin('AMap.Geocoder', () => {
		const geocoder = new AMap.Geocoder({
		  radius: 1000, // 范围，默认：1000
		  extensions: 'all' // 返回地址描述的详细度等级：base/all/poi/polyline/streetNumber/polyline/district/adcode/building/businessArea/subdistrict/number/cityCode/districtCode/streetCode/roadCode/townCode/villageCode/communityCode/businessCircleCode，默认为base
		});
		geocoder.getAddress(lnglat, (status, result) => {
		  if (status === 'complete' && result.regeocode) {
			this.address = result.regeocode.formattedAddress;
			console.log('当前地址：', result.regeocode.formattedAddress); // 输出完整地址信息
		  } else {
			console.log('获取地址失败');
		  }
		});
	  });
	},
	bindwindowclick() {
	  /**********************infoWindow的点击事件***********************/
	  console.log('infoWindow的点击事件');
	  const windowDomList = document.querySelectorAll('.custom-button')
	  windowDomList.forEach(i=>{
		i.onclick = (e)=>{
			if (this.userLnglat === null) {
				this.$modal.msgError('定位失败,无法导航!')
			} else {
				const id =e.target.getAttribute('id')
				//在这里做点击的操作
				console.log('开始巡检的点击事件',id,'用户坐标：',this.userLnglat.lng,'设备坐标：',this.clickPoiLnglat);
				this.infoWindow.close();
				console.log(this.driving);
				// 创建起点和终点标记点
				
				const start = new AMap.LngLat(this.userLnglat.lng, this.userLnglat.lat); // 起点
				const end = new AMap.LngLat(this.clickPoiLnglat[0], this.clickPoiLnglat[1]); // 终点
				//const start = new AMap.LngLat(118.144284, 24.489387); // 起点
				//const end = new AMap.LngLat(118.139364, 24.502168); // 终点
				// 创建驾车路线规划实例
				const driving = new AMap.Driving({
				  map: this.map,
				  policy: AMap.DrivingPolicy.LEAST_TIME, // 设置策略为最短时间优先
				  extensions: 'all' 
				});
		   
				// 计算路线并显示在地图上
				driving.search(start, end, (status, result) => {
				  if (status === 'complete') {
					console.log('路线规划成功');
					
					// 构造高德地图的URL Scheme
					      // 注意：这里的URL Scheme格式需要根据高德地图的实际格式进行调整
					      // 以下是一个假设的格式和示例参数
					      const destinationLatitude = this.clickPoiLnglat[0]; // 目的地的纬度
					      const destinationLongitude = this.clickPoiLnglat[1]; // 目的地的经度
						  
					      // iOS平台的URL Scheme示例
					      //const iosScheme = 'iosamap://navigate?source=MyApp&dlat='+destinationLatitude+'&dlon='+destinationLongitude+'&dname=xxx&t=0';
					
					      // Android平台的URL Scheme示例（注意：这个格式可能需要根据实际高德地图APP的版本进行调整）
					      const androidScheme = 'androidamap://navi?sourceApplication=ZHXJAPP&poiname=poiname&lat='+destinationLongitude+'&lon='+destinationLatitude+'&dev=1&style=2';
						  
					      // 判断用户设备类型，并调用相应的URL Scheme
					      if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
					        // iOS设备
					        //window.location.href = iosScheme;
							alert('IOS暂不支持。');
					      } else if (navigator.userAgent.match(/Android/i)) {
					        // Android设备
					        window.location.href = androidScheme;
					      } else {
					        // 其他设备或浏览器，可能不支持直接调用URL Scheme
					        alert('您的设备不支持直接调用高德地图APP进行导航。');
					      } 
					
				  } else {
					console.log('路线规划失败');
				  }
				}); 
			}
		}
	  })
	}
  },
};
</script>


